[제이쿼리] 시간지연 함수 delay()

일정시간 뒤에 콜백함수를 실행하는 방법에는 setTimeout() 함수가 사용됩니다. 이런 지연 함수는 제이쿼리에도 동일하지는 않으나 일정시간이 지난 후 애니메이션 큐를 지연하여 실행하기 위한 제이쿼리의 시간지연 함수는 바로 delay() 함수입니다.

선택요소.delay(delay time, queuename)

delay() 함수는 일정시간이 경과한 뒤에 함수 뒤의 코드를 실행하도록 강제적인 지연시간을 생성합니다. 단 이 경우 큐를 가진 애니메이션에만 적용된다는 점을 꼭 기억해야합니다. 즉, 그 외의 non-queue 코드에는 적용이 되지 않습니다. 이 경우 당연히 settimeout()을 사용하시면 됩니다.

예를들어 특정요소의 슬라이드 애니메이션을 구현할 경우 만약 이를 3초 뒤에 적용시킨다고 한다면 순수 자바스크립트를 사용한다면 setTimeout()을 사용해야 할 것입니다. 제이쿼리를 사용한 경우 아래와 같습니다.제이쿼리의delay() 함수 예제 코드를 아래에서 확인하세요.



# delay() 사용하여 3초 후 애니메이션 구현하는 예제보기 아래 예제는 간단한 delay() 메소드의 예제입니다. 3초의 지연시간 후에 해당 애니메이션을 실행합니다.
@ delay.css

@ delay.html

@ delay.js

슬라이드 애니메이션을 코드 실행 후 바로 사용하는 것이 아닌 지연시간을 3초 후 실행되게합니다. 이를 구현하기 위해 delay(3000)을 사용하였습니다. 앞에도 언급하였지만 delay()를 수행하기 위해서는 반드시 애니메이션 큐를 가진 요소에 적용하여야 합니다.


:+: 실전예제보기
아래는 위 코드를 구현한 모습입니다. 만약 아래 버튼을 클릭하면 3초 후의 지연시간을 가진 뒤 slideUp() 애니메이션이 나타나게 될 것입니다. 클릭 후 3초 후 어떻게 되는지 확인해보세요. 사라지면 정상적으로 delay() 함수가 구현된 것입니다.

SlideUp this Box!

Click!


만약 위 예제를 setTimeout()으로 구현한다면 어떻게 해야할까요? 이 경우 아래와 같이 될 것입니다.

# setTimeout()을 사용하여 동일한 기능을 구현한 예제

순수 자바스크립트의 setTimeout()을 사용하여 구현할 수 있습니다.

두 가지 모두 동일한 기능을 수행하게 할 수 있으나 적용 가능한 범위나 방법, 옵션이 다르므로 상황에 따라 맞는 적합한 방법을 사용하시기 바랍니다.